<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>   
<%@ taglib prefix="elfunc" uri="/WEB-INF/tlds/el-functions.tld" %>
	<link href="/ssol2/common/css/member.css" type="text/css" rel="stylesheet">
	<style type="text/css">
	.str_o{
		color:red;
	}
	.str_o{
		color:blue;
	}
	</style>
	<script type="text/javascript">
	/*--------------------------------------------------------------
	기          능 : jQuery validate()를 이용한 회원가입을 위한 폼 유효성검정루틴
	제          작 : 송준철 
	작성날짜 : 2012.02.29 
	----------------------------------------------------------------*/
	//validate()function은 submit button을 click 하면 실행됩니다. 
	$(function(){
		$("#member_joinform").validate({
			rules:{
				name: {
					required : true,
					minlength : 2 
				},
				userid:{
					required : true,
					minlength : 3
				},				
				passwd:{
					required : true,
					minlength: 8
				},
				confirm_passwd:{
					required : true,
					minlength : 8,
					equalTo: "#passwd"				
				},
				
				zipcode:{
					required : true,
					number : true, 
					minlength : 6
				},  
					
				addr1:"required",
				addr2:"required",
				hp: { 
					required : true, 
					number : true
				},
				
 				email:{
					required : true,
					email : true
				},								
			},
			messages:{
				name: {
					required : "이름을 입력해주세요", 
					minlength : "2자 이상 입력해주세요"
				},
				userid:{
					required : "아이디를 입력해주세요",
					minlength : "최소 3자 이상 입력해주세요"
				},
				passwd:{
					required : "암호를 입력해주세요",
					minlength: "최소8자 이상을 입력하세요"
				},
				confirm_passwd:{
					required : "암호를 한 번 더 입력해주세요",
					minlength : "최소 8자 이상을 입력해주세요",
					equalto: "암호가 일치하지 않습니다."				
				},
				
				zipcode:{
					required : "우편번호를 입력해주세요",
					minlength : "-(하이픈)빼고 정확한 번호를 입력하세요.",
					number : "숫자로 입력하세요" 
				},  
					
				addr1: "시,군,구 주소를 입력하세요.",
				addr2:"나머지 주소를 입력하세요",
				hp: { 
					required : "-(하이픈)빼고 휴대폰 번호를 입력하세요.", 
					number : "숫자로 입력해주세요"
				},
				
 				email:{
					required : "이메일을 입력해주세요",
					email : "형식에 맞는 이메일을 입력해주세요"
				},					
			},	
			
		});	
		$("[name='userid']").keyup(function(){
			/* if( $.trim($("[name='userid']").val()) == ''){
				$('#userid').html('<span class="str_o">' + 아이디 + ' 를 입력하세요.</span>'); 
				$("[name='passwd']").focus();
				return false;
			} */
			$.ajax({
			//console.log($(this).val());
			url : "userid_confrim.action",
			async : false,
			type : "post",
			data : "userid="+$("[name='userid']").val(),  
			success : function(res){
				data = eval("("+res+")");
				console.log(data.userid);
				console.log(data.check);
                    if (data.check == 1) {
                        $('#userid').html('<span class="str_o">' + data.userid + ' 은(는) 사용 가능합니다.</span>');                        
                    } 
                    else  {
                        $('#userid').html('<span class="str_x">' + data.userid + ' 은(는) 이미 사용중인 아이디 입니다.</span>');
                        
                    } 
			 },
			  error:function(){
				  alert('오류발생');
			  }
			});
			
		});
		
	});
	

	
	/* 	 function idCheck(){
			var userid = $("[name='userid']").val();// document.member_joinform.userid.value;
			window.open("MemberRegAction.action?userid="+userid,"이름","사이즈"); 
		} */
	
		</script>
	<div class="con">
	<form id="member_joinform" name="member_joinform" method="post" action="member_insert.action">
	<fieldset>
	<legend><strong><strong>회원가입</strong></legend>
	<table align="center" width="965" cellspacing="1" cellpadding="1">
	  <tr>
	    <td align="left" style="width: 120px";><label for="name"><strong>이름</strong></label></td>
	    <td><input type="text" name="name" id="name" /></td>
	  </tr>	  
	  <tr>
	    <td align="left" style="width: 120px";><label for="name"><strong>아이디</strong></label></td>
	    <td><input type="text" name="userid" /><span id="userid"></span></td>
	  </tr>
	  <!-- <tr>
	  	<td></td>
	  	<td><input type="button" id="id_confirm_btn" name="id_confirm_btn" value="아이디중복확인" /></td>
	  </tr> -->
	  <tr>
		<td>
	    	<label for="password"><strong>비밀번호</strong></label>
	   	</td>
	    <td>
	   		<input type="password" name="passwd" id="passwd" />
	   	</td>
	   <tr>
	   		<td><strong>비밀번호확인</strong></td>
			 <td><input type="password" name="confirm_passwd" id="confirm_passwd" /></td>
	   </tr>  
	   <tr>
	    	<td><label for="zipcode"><strong>우편번호</strong></label></td>
		    <td><input type="text" name="zipcode" id="zipcode" /></td>
	   </tr>
	   <tr>
	    	<td><label for="addr1"><strong>주소</strong></label></td>
	    	<td><input type="text" name="addr1" id="addr1" /></td>
	    <tr>
	    	<td><label for="addr2"></label></td>
	    	<td><input type="text" name="addr2" id="addr2" /></td>
	    </tr>
	     
	  <tr>
	  	  <td><strong>집전화</strong></td>
	    	<td><input name="tel" type="text" id="tel" value="" /></td>
	  </tr>
	  <tr>
	       <td><strong>휴대폰</strong></td>  
	   	   <td><input name="hp" type="text" id="hp" value="" /></td>
	  </tr> 
	  <tr>
	  	  <td><strong>전자우편</strong></td>
	      <td><input name="email" type="text" id="email" value="" class="required email" /></td>
	  </tr>
	  
	  <tr>
	    <td colspan="2" style="padding-left: 100px; padding-top: 10px";>
	    	<input type="submit" name="submit" id="submit" value="확인" />
	     	<input type="reset" name="reset" id="reset" value="취소" />
	    </td>
	  </tr>
	</table>
	
	</fieldset>
	</form>
	</div>